<template>
	<view class="goods-list-container">
		<!-- 左侧分类导航 -->
		<scroll-view class="category-nav" scroll-y scroll-with-animation :scroll-top="verticalNavTop"
			style="height:calc(100vh - 450upx);">
			<view class="category-item" :class="index==tabCur?'active':''" v-for="(item,index) in category" :key="index"
				@tap="TabSelect" @click="changeSelect(item._id)" :data-id="index">
				<text class="category-text">{{item.name}}</text>
				<view class="active-indicator" v-if="index==tabCur"></view>
			</view>
		</scroll-view>

		<!-- 右侧商品列表 -->
		<scroll-view class="goods-main" scroll-y scroll-with-animation style="height:calc(100vh - 450upx);"
			:scroll-into-view="'main-'+mainCur" @scroll="VerticalMain">
			<view class="goods-section" :key="index" :id="'main-'+index">
				<view class="goods-list">
					<view class="goods-item" v-for="subItem in goodsList" :key="subItem._id">
						<!-- 商品图片 -->
						<view class="goods-image" @click="goPage(subItem)">
							<image :src="subItem.mainImage" mode="aspectFill"></image>
							<view class="image-overlay">
								<text class="overlay-text">查看详情</text>
							</view>
						</view>

						<!-- 商品信息 -->
						<view class="goods-info">
							<view class="goods-header" @click="goPage(subItem)">
								<text class="goods-title">{{subItem.name}}</text>
								<text class="goods-desc">{{subItem.description}}</text>
							</view>

							<view class="goods-footer">
								<view class="price-section flex-direction align-start" @click="goPage(subItem)">
									<view class="discount-badge flex		" v-if="subItem.isSpecialOffer">
										<text class="discount-text">特价</text>
									</view>
									<view class="flex align-center">
										<text class="current-price">￥{{subItem.price}}</text>
										<text class="original-price"
											v-if="subItem.isSpecialOffer && subItem.price > subItem.specialPrice">
											￥{{subItem.originalPrice}}
										</text>
									</view>

								</view>

								<view class="action-section">
									<view class="add-cart-btn" @click="addCartList(subItem)">
										<text class="add-icon">+</text>
										<view class="cart-badge" v-if="subItem.cartQuantity">
											<text class="badge-text">{{subItem.cartQuantity}}</text>
										</view>
									</view>
								</view>
							</view>
						</view>
					</view>
				</view>
			</view>
		</scroll-view>
	</view>
</template>

<script>
	import {
		AddCart
	} from "@/api/cart.js";
	import {
		errorHandler
	} from '@/utils/errorHandler.js';

	export default {
		props: {
			category: {
				type: Array,
				default: []
			},
			goodsList: {
				type: Array,
				default: []
			},
		},
		data() {
			return {
				list: [],
				tabCur: 0,
				mainCur: 0,
				verticalNavTop: 0,
				load: true
			};
		},
		created() {
			uni.showLoading({
				title: '加载中...',
				mask: true
			});
			let list = [{}];
			for (let i = 0; i < 5; i++) {
				list[i] = {};
				list[i].name = String.fromCharCode(65 + i);
				list[i].id = i;
			}
			this.list = list;
			this.listCur = list[0];
		},
		onReady() {
			uni.hideLoading()
		},
		methods: {
			//计算单个商品价格
			finalPrice(goodsItem) {
				const basePrice = goodsItem.price

				if (!goodsItem.isSpecialOffer) {
					return basePrice.toFixed(2); // 普通商品直接显示
				}

				// 特价商品计算逻辑
				const discount = goodsItem.specialOfferInfo.discountRate * 0.1;
				return (basePrice * discount).toFixed(2);
			},
			addCartList(item) {
				// 验证库存
				if (!item.stock || item.stock <= 0) {
					uni.showToast({
						title: '商品库存不足',
						icon: 'none'
					});
					return;
				}

				AddCart({
					productId: item._id,
					quantity: 1
				}).then(res => {
					if (res.data.code === 200) {
						uni.showToast({
							title: "加购成功",
							icon: "success",
						});
					} else {
						uni.showToast({
							title: res.data.message || "加购失败",
							icon: "none",
						});
					}
				}).catch(err => {
					console.error('加入购物车失败:', err);
					// 使用统一的错误处理
					errorHandler.showApiError(err, '加购失败');
				})
			},
			goPage(item) {
				this.$router.smartNavigate({
					url: '/pages/homePages/sam/samGoodsInfo?id=' + item._id
				})
			},
			TabSelect(e) {
				this.tabCur = e.currentTarget.dataset.id;
				this.mainCur = e.currentTarget.dataset.id;
				this.verticalNavTop = (e.currentTarget.dataset.id - 1) * 50
			},
			changeSelect(id) {
				this.$emit('getCategoryProduct', id)
			},
			// 希望有大佬给我讲解一下这个双向联动函数
			VerticalMain(e) {
				// #ifdef MP-ALIPAY
				return false //支付宝小程序暂时不支持双向联动 
				// #endif
				let that = this;
				let tabHeight = 0;
				if (this.load) {
					for (let i = 0; i < this.list.length; i++) {
						let view = uni.createSelectorQuery().select("#main-" + this.list[i].id);
						view.fields({
							size: true
						}, data => {
							this.list[i].top = tabHeight;
							tabHeight = tabHeight + data.height;
							this.list[i].bottom = tabHeight;
						}).exec();
					}
					this.load = false
				}
				let scrollTop = e.detail.scrollTop + 10;
				for (let i = 0; i < this.list.length; i++) {
					if (scrollTop > this.list[i].top && scrollTop < this.list[i].bottom) {
						this.verticalNavTop = (this.list[i].id - 1) * 50
						this.tabCur = this.list[i].id
						console.log(scrollTop)
						return false
					}
				}
			}
		},
	}
</script>

<style scoped>
	.goods-list-container {
		display: flex;
		background: white;
	}

	/* 左侧分类导航 */
	.category-nav {
		width: 200rpx;
		background: #f8f9fa;
		border-right: 1px solid #f0f0f0;
	}

	.category-item {
		width: 100%;
		height: 100rpx;
		display: flex;
		align-items: center;
		justify-content: center;
		position: relative;
		transition: all 0.3s ease;
		border-left: 4rpx solid transparent;
	}

	.category-item.active {
		background: white;
		border-left-color: #FF6B35;
	}

	.category-text {
		font-size: 28rpx;
		color: #666;
		font-weight: 500;
		transition: all 0.3s ease;
	}

	.category-item.active .category-text {
		color: #FF6B35;
		font-weight: 700;
	}

	.active-indicator {
		position: absolute;
		right: 0;
		top: 50%;
		transform: translateY(-50%);
		width: 6rpx;
		height: 40rpx;
		background: #FF6B35;
		border-radius: 3rpx 0 0 3rpx;
	}

	/* 右侧商品列表 */
	.goods-main {
		flex: 1;
		background: white;
	}

	.goods-section {
		padding: 0;
	}

	.goods-list {
		padding: 0;
	}

	.goods-item {
		display: flex;
		padding: 24rpx;
		border-bottom: 1px solid #f5f5f5;
		transition: all 0.3s ease;
		position: relative;
	}

	.goods-item:last-child {
		border-bottom: none;
	}

	.goods-item:active {
		background: #fafafa;
		transform: scale(0.98);
	}

	/* 商品图片 */
	.goods-image {
		width: 200rpx;
		height: 200rpx;
		margin-right: 24rpx;
		border-radius: 16rpx;
		overflow: hidden;
		position: relative;
		flex-shrink: 0;
	}

	.goods-image image {
		width: 100%;
		height: 100%;
		border-radius: 16rpx;
		transition: all 0.3s ease;
	}

	.image-overlay {
		position: absolute;
		top: 0;
		left: 0;
		right: 0;
		bottom: 0;
		background: rgba(0, 0, 0, 0.5);
		display: flex;
		align-items: center;
		justify-content: center;
		opacity: 0;
		transition: all 0.3s ease;
		border-radius: 16rpx;
	}

	.goods-image:active .image-overlay {
		opacity: 1;
	}

	.overlay-text {
		color: white;
		font-size: 24rpx;
		font-weight: 600;
	}

	/* 商品信息 */
	.goods-info {
		flex: 1;
		display: flex;
		flex-direction: column;
		justify-content: space-between;
		min-width: 0;
	}

	.goods-header {
		flex: 1;
	}

	.goods-title {
		font-size: 32rpx;
		font-weight: 700;
		color: #333;
		line-height: 1.4;
		margin-bottom: 12rpx;
		display: block;
		overflow: hidden;
		text-overflow: ellipsis;
		display: -webkit-box;
		-webkit-line-clamp: 2;
		-webkit-box-orient: vertical;
	}

	.goods-desc {
		font-size: 26rpx;
		color: #666;
		line-height: 1.4;
		overflow: hidden;
		text-overflow: ellipsis;
		display: -webkit-box;
		-webkit-line-clamp: 2;
		-webkit-box-orient: vertical;
	}

	.goods-footer {
		display: flex;
		align-items: center;
		justify-content: space-between;
		margin-top: 16rpx;
	}

	.price-section {
		display: flex;
		gap: 12rpx;
	}

	.current-price {
		font-size: 36rpx;
		font-weight: 700;
		color: #FF2E44;
	}

	.original-price {
		font-size: 24rpx;
		color: #999;
		text-decoration: line-through;
	}

	.discount-badge {
		background: linear-gradient(135deg, #FF4D4F 0%, #FF7875 100%);
		border-radius: 12rpx;
		padding: 4rpx 8rpx;
	}

	.discount-text {
		color: white;
		font-size: 20rpx;
		font-weight: 600;
	}

	.action-section {
		position: relative;
	}

	.add-cart-btn {
		width: 50rpx;
		height: 50rpx;
		background: linear-gradient(135deg, #FF6B35 0%, #FE6100 100%);
		border-radius: 50%;
		display: flex;
		align-items: center;
		justify-content: center;
		box-shadow: 0 4rpx 16rpx rgba(254, 97, 0, 0.3);
		transition: all 0.3s ease;
		position: relative;
	}

	.add-cart-btn:active {
		transform: scale(0.9);
		box-shadow: 0 2rpx 8rpx rgba(254, 97, 0, 0.4);
	}

	.add-icon {
		color: white;
		font-size: 32rpx;
		font-weight: 700;
	}

	.cart-badge {
		position: absolute;
		top: -8rpx;
		right: -8rpx;
		background: #FF4D4F;
		border-radius: 50%;
		min-width: 32rpx;
		height: 32rpx;
		display: flex;
		align-items: center;
		justify-content: center;
		border: 2rpx solid white;
		box-shadow: 0 2rpx 8rpx rgba(255, 77, 79, 0.4);
	}

	.badge-text {
		color: white;
		font-size: 20rpx;
		font-weight: 700;
	}

	/* 兼容旧样式 */
	image {
		width: 100%;
		height: 100%;
	}

	.fixed {
		position: fixed;
		z-index: 99;
	}

	.VerticalNav.nav {
		width: 200upx;
		white-space: initial;
	}

	.VerticalNav.nav .cu-item {
		width: 100%;
		text-align: center;
		margin: 0;
		border: none;
		height: 50px;
		position: relative;
	}

	.VerticalNav.nav .cu-item.cur {
		display: flex;
		justify-content: center;
		align-items: center;
		color: #fff;
		background-color: #003a81;
	}

	.VerticalNav.nav .cu-item.cur::after {
		content: "";
		width: 8upx;
		height: 30upx;
		border-radius: 0 10upx 10upx 0;
		position: absolute;
		background-color: #fff;
		top: 0;
		left: 0upx;
		bottom: 0;
		margin: auto;
	}

	.VerticalBox {
		display: flex;
	}

	.VerticalBox {
		background-color: #fff;
	}

	.VerticalMain {
		flex: 1;
	}

	.goods_img {
		padding: 10rpx;
		height: 200rpx;
		width: 40%;
	}

	.goods_img image {
		border-radius: 10rpx;
	}

	.goods_info {
		width: 60%;
		height: 200rpx;
		padding: 10rpx 20rpx;
	}

	.goods_info_title {
		font-weight: 700;
		font-size: 28rpx;
		color: #000;
		line-height: 38rpx;
	}

	.goods_info_text {
		margin: 10rpx 0;
	}

	.goods_info_operate {
		width: 100%;
	}

	.goods_info_pire {
		color: red;
		font-weight: 700;
	}

	.goods_info_add {
		position: relative;
		width: 40rpx;
		height: 40rpx;
		line-height: 40rpx;
		text-align: center;
		font-size: 18px;
		color: #fff;
		background-color: #003a81;
		border-radius: 50%;
	}

	.goods_info_add_afr {
		font-size: 10px;
		width: 30rpx;
		height: 30rpx;
		line-height: 28rpx;
		text-align: center;
		position: absolute;
		top: -40%;
		right: -30%;
		background-color: red;
		border-radius: 50%;
		border: 1px solid #fff;
	}
</style>